<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
        <title>博客后台管理 - 登录</title>
        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-touch-fullscreen" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="default">
        <link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/animate.min.css">
        <link rel="stylesheet" type="text/css" href="css/style.min.css">
        <style type="text/css">
            .signin-form .has-feedback {
                position: relative;
            }

            .signin-form .has-feedback .form-control {
                padding-left: 36px;
            }

            .signin-form .has-feedback .mdi {
                position: absolute;
                top: 0;
                left: 0;
                right: auto;
                width: 36px;
                height: 36px;
                line-height: 36px;
                z-index: 4;
                color: #dcdcdc;
                display: block;
                text-align: center;
                pointer-events: none;
            }

            .signin-form .has-feedback.row .mdi {
                left: 15px;
            }

            .signin-form .form-group:last-child,
            .login-right p:last-child {
                margin-bottom: 0px;
            }

            .login-right {
                background: #67b26f !important;
                background: -moz-linear-gradient(45deg, #67b26f 0, #4ca2cd 100%) !important;
                background: -webkit-linear-gradient(45deg, #67b26f 0, #4ca2cd 100%) !important;
                background: linear-gradient(45deg, #67b26f 0, #4ca2cd 100%) !important;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#67b26f', endColorstr='#4ca2cd', GradientType=1) !important;
            }

            .login-box {
                max-width: 700px;
            }

            .login-right {
                max-width: 50%;
            }
        </style>
    </head>

    <body class="center-vh" style="background-image: url(images/login-bg-4.jpg); background-size: cover;">
        <div class="bg-translucent p-2">
            <div class="flex-box bg-white login-box">
                <div class="login-left p-5" style="width: 325px;">
                    <form class="signin-form needs-validation" novalidate>
                        <div class="mb-3 has-feedback" style="margin-bottom: 45px !important;">
                            <span class="mdi mdi-account" aria-hidden="true"></span>
                            <input type="text" class="form-control" id="username" name="username" placeholder="用户名"
                                required>
                        </div>

                        <div class="mb-3 has-feedback" style="margin-bottom: 45px !important;">
                            <span class="mdi mdi-lock" aria-hidden="true"></span>
                            <input type="password" class="form-control" id="password" name="password" placeholder="密码"
                                required>
                        </div>


                        <!-- <div class="mb-3 has-feedback row">
                            <div class="col-7">
                                <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
                                <input type="text" name="captcha" class="form-control" placeholder="验证码" required>
                            </div>
                            <div class="col-5 text-right">
                                <img src="images/captcha.png" class="pull-right" id="captcha" style="cursor: pointer;"
                                    onclick="this.src=this.src+'?d='+Math.random();" title="点击刷新" alt="captcha">
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="rememberme">
                                <label class="form-check-label not-user-select" for="rememberme">5天内自动登录</label>
                            </div>
                        </div> -->

                        <div class="mb-3 d-grid">
                            <button class="btn btn-primary" type="submit">立即登录</button>
                            <!-- <button id="login-btn" class="btn btn-primary">立即登录</button> -->
                        </div>
                    </form>
                </div>
                <div class="login-right p-5 d-none d-sm-block">
                    <!-- <p class="mb-3"><img src="images/logo.png" alt="logo" /></p> -->
                    <p class="mb-3" style="color: white;font-size: 18px;">博客后台管理系统</p>
                    <p class="text-white">基于Light Year Admin模板开发</p>
                    <p class="text-white">Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。</p>
                    <!-- <p class="text-white align-self-end">Copyright © 2022 <a target="_blank"
                            href="http://www.bixiaguangnian.com" class="text-white">笔下光年</a>. All right reserved</p> -->
                </div>
            </div>
        </div>

        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/popper.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/lyear-loading.js"></script>
        <script type="text/javascript">
            var loader;
            $(document).ajaxStart(function () {
                $("button:submit").html('登录中...').attr("disabled", true);
                loader = $('button:submit').lyearloading({
                    opacity: 0.2,
                    spinnerSize: 'nm'
                });
            }).ajaxStop(function () {
                loader.destroy();
                $("button:submit").html('立即登录').attr("disabled", false);
            });


            $('.signin-form').on('submit', function (event) {
                if ($(this)[0].checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                    $(this).addClass('was-validated');
                    return false;
                }

                var data = {
                    username: $('#username').val(),
                    password: $('#password').val(),
                };

                fetch("http://127.0.0.1:5588/admin/user/login", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8",
                    },
                    body: JSON.stringify(data),
                })
                    .then((response) => response.json())
                    .then(res => {
                        // console.log("Success:", res);
                        if (res.code != 200) {
                            $('#password').val(''); // 清空密码
                            return;
                        }

                        sessionStorage.setItem('username', res.data.username);
                        sessionStorage.setItem('nickname', res.data.nickname);
                        sessionStorage.setItem('token', res.data.token);
                        location.href = 'index.html';
                    })
                    .catch((err) => {
                        console.error("Error:", err);
                    });

                return false;
            });
        </script>
    </body>

</html>